<template>
    <div>
        <!--组件传值 父给子
        v-bind 绑定变量 可以简写为  ：
        --> 
        <Title :title="title"></Title>
        <!--1.先提供图表容器  提供宽高  ref当前元素模版引用 类似于id-->
        <div style="height: 250px;"  ref="box"></div>
    </div>
</template>
<script setup>
import Title from './Title.vue';
//引入moment
import moment from 'moment';
//引入get请求
import {get} from '@/utils/request.js'
import {ref,onMounted} from 'vue';
//引入折线图的构造函数
import {Line} from '@antv/g2plot';

const title = ref('实时温度曲线');
//声明模版引用
const box=ref(null);
//声明一个空数组接收
let temData=ref([]);
//声明创建折线图表实例函数
const loadLine = ()=>{
    //new Line(图表容器id，{图表配置项})
    const line = new Line(box.value, {
        //图表数据源
  data:temData.value,
  xField: 'time',
  yField: 'temperature',
  //配置x，y颜色
  xAxis:{
    //文本
    label:{
        //旋转属性
        rotate:-45,
        style:{
            fill:'white'
        }
    }
  },
  yAxis:{
    //文本
    label:{
        style:{
            fill:'white'
        }
    }
  },
  //折线颜色
  label: {
    
        style:{
            fill:'white',
            fontSize:18,
        }
    
  },
  point: {
    size: 5,
    shape: 'diamond',
    style: {
      fill: 'white',
      stroke: '#5B8FF9',
      lineWidth: 2,
    },
  },
  //给折线图设置动画
   animation: {
    appear: {
     animation: 'wave-in',
     duration: 3500,
    },
   },
   //设置曲线平滑
   smooth:true,
 tooltip: { showMarkers: false },
 state: {
  active: {
   style: {
    shadowBlur:4,
    stroke: '#000',
    fill: 'red',
   },
  },
 },
 interactions: [{ type: 'marker-active' }],
});
line.render();
}

//声明获取当天数据函数
const getTemData = async()=>{
let response = await get('/dashboard/pageQueryTodayData',{
  page:1,
  pageSize:60
});
console.log(response,'获取相应');
response.data.list.forEach((item,index,arr)=>{
    arr[0].temperature=15.4;
  item.time = moment(item.insert_time).format('HH:mm');
});
//数据采集可能一致 每隔十条或八条取一条
let temp = [];
for(var i=0;i<response.data.list.length;i++){
if(i%7==0){
  //下标除十等于零
  //将符合条件数据添加至temp
  temp.push(response.data.list[i])
}
}
temData.value = temp;
}
//生命周期 获得dom 节点 标签 ref=box
onMounted(async()=>{
  //调用获取函数
 await getTemData();
loadLine();//加载折线图
})

</script>

<style lang="less">
  
</style>